<!--
 * @Author: 宋杰
 * @Date: 2020-12-25 20:19:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-12 15:27:37
 * @Description: 一家十一口(猜一字) 用户信息
-->
<template>
  <!-- 用户信息 -->
  <div class="divBox">
    <div class="div3">
      <div class="topBox3">
        <div class="topBox2 "> 机构信息</div>
        <div class="topBox3_sou">
          <el-button
            @click="inputListDate"
            type="primary"
            plain
            round
            class="sousuoBox"
          >
            <i class="el-icon-edit"></i>
            <span >编 辑</span>
          </el-button>
        </div>
      </div>

      <!-- con -->
      <!-- 显示不可编辑内容 -->
      <div v-if="bianjishow == true">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in inputList" :key="index">
            <div class="grid-content bg-purple divcol">
              <div>
                <span>{{ item.name }}</span
                ><span>:</span>
              </div>
              <div v-if="item.show == 1" class="textClass">
                {{item.value}}
              </div>
              <div v-if="item.show == 2" class="textClass">
                {{item.value}}
              </div>
            </div>
          </el-col>
        </el-row>
        <div></div>
      </div>
      <!-- 编辑内容 -->
      <div v-if="bianjishow == false">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in inputList" :key="index">
            <div class="grid-content bg-purple divcol">
              <div>
                <span>{{ item.name }}</span
                ><span>:</span>
              </div>
              <div v-if="item.show == 1">
                <el-input
                  v-model="item.value"
                  placeholder=""
                ></el-input>
              </div>
              <div v-if="item.show == 2">
                <template>
                  <el-radio v-model="item.value" label="有">有</el-radio>
                  <el-radio v-model="item.value" label="无">无</el-radio>
                </template>
              </div>
            </div>
          </el-col>
        </el-row>
        <div></div>
      </div>

      <!-- 提交 -->
      <div class="tijiaoBox" v-if="bianjishow == false">
          <el-button type="primary" plain @click="tijiaobut">提 交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import basic from './login//basic'

export default {
  data() {
    return {
      bianjishow:true, //编辑切换
      inputList: [
        { id: "0", name: "机构名", show: "1", value: "新东方培训机构" },
        { id: "1", name: "法人姓名", show: "1", value: "王有才" },
        { id: "2", name: "办学许可证", show: "2", value: "有" },
        { id: "3", name: "收费许可证", show: "2", value: "有" },
        { id: "4", name: "教师队伍人数", show: "1", value: "20人" },
        { id: "5", name: "办公面积", show: "1", value: "120平方米" },
        { id: "6", name: "教学面积", show: "1", value: "600平方米" },
        { id: "7", name: "经营内容", show: "1", value: "语文培训、计算机培训..." },
        { id: "8", name: "省市选择", show: "1", value: "南京" },
        { id: "9", name: "详细地址", show: "1", value: "江苏省南京市鼓楼" }
      ]
    };
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    inputListDate() {
      // console.log("inputList", this.inputList);
      this.bianjishow = !this.bianjishow
    },
    tijiaobut(){
      this.bianjishow = true
    }
  }
};
</script>
<style scoped>
.divBox {
  width: 100%;
  /* min-height: 100vh; */
  padding: 1% 5% 10% 5%;
  background: #f5f6fa;
  border: 1px solid transparent;
  padding-top: 57px;
}
.div3 {
  /* position: relative; */
  background: #fff;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.topBox2 {
  padding: 0 10px;
  width: 30%;
  height: 49px;

  background: url(../../../static/img/h1-bg.png) no-repeat;
    /* border-bottom: 1px solid rgb(223, 223, 223); */
  color: #fff;
  font-size: 18px;
  position: absolute;
  left: 4%;
  margin-top: -1px;
  padding-left: 20px;
  padding-top: 5px;
}

.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
  border-bottom: 1px solid rgb(223, 223, 223);
}
.sousuoBox {
  margin-left: 10px;
}
.topBox3_sou{
   position: absolute; right: 10px; margin-right: 5%;
}
.topBox3_sou >>> .el-button.is-round {
  padding: 0 !important;
  height: 30px;
  width: 90px;
  line-height: 30px;
  text-align: center;
}
.divcol {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    height: 60px;
    padding: 10px;
}
.divcol >:nth-child(1){
    flex: 0.8;
}
.divcol >:nth-child(2) {
    flex: 2.5;
}
.tijiaoBox {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tijiaoBox>:nth-child(1) {
    width: 90px;
}

/* 展示的内容的文字颜色 */
.textClass {
  color: #828285 !important;
}
</style>
